<template>
	<view class="swiper-packbox">
		<view class="swiper-packbox-content relative">
			<view class="swiper-content relative" v-for="(item, index) in swiperSlideList" :key="index">
				<view :class="['absolute','swiper-item',item.class,]" :style="{backgroundImage: item.class !== 'swiper-slide-3' ? '' : '',}">
					<image class="swiper-cover absolute" 
						:style="{'z-index': ['swiper-slide-3', 'swiper-slide-4', 'swiper-slide-5'].includes(item.class) ? 0 : 10,}"
						v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
						:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/border-${item.reward_item_type && item.reward_item_type.toLowerCase()}.png`" mode=""></image>
					
					<image class="swiper-lever absolute" 
						:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-` + (item.reward_item_type && item.reward_item_type.toLowerCase()) + '.png'" mode="heightFix"></image>
					
					<!-- #ifdef MP-WEIXIN -->
					<comPlaceImage
						class="swiper-img"
						placeImageClass="flex-justify-content-center"
						:lazyLoad="true"
						:style="{
							'width': '112rpx',
							'height': '112rpx',
							'margin': '88rpx auto 0rpx',
							'display': 'block',
						}"
						:src="item.reward_item_cover"
						mode="heightFix"></comPlaceImage>
					<!-- #endif -->
						
					<!-- #ifdef APP-PLUS -->
					<comPlaceImage
						class="swiper-img"
						placeImageClass="flex-justify-content-center"
						:lazyLoad="true"
						:style="{
							'width': '112rpx',
							'height': '112rpx',
							'margin': item.class !== 'swiper-slide-3' ? '88rpx auto 0rpx' : '0rpx auto',
						}"
						:src="item.reward_item_cover"
						mode="heightFix"></comPlaceImage>
					<!-- #endif -->
				
					<view class="swiper-txt truncate relative font-hanserif-bold"
						:style="{
							'z-index': ['swiper-slide-3', 'swiper-slide-4', 'swiper-slide-5'].includes(item.class) ? 0 : 10,
						}"
					>{{item.reward_item_name }}</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import { setFixArrayFun, setAsyncFunWait } from '@/setupproject/TOOLS_FUN';

	let CarouselClassList = [];

	export default {
		name: 'comCarouselCard',
		props: {
			resLists: Array
		},
		data() {
			return {
				swiperSlideList: [],
			};
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			}
		},
		watch: {
			resLists() {
				this.getSwiperSlideFun();
			}
		},
		destroyed() {
			
		},
		mounted() {
			setInterval(this.getAnimateSwiperFun, 2400);
		},
		methods: {
			getSwiperSlideFun() {
				if(this.resLists.length === 1) {
					CarouselClassList = ['swiper-slide-3'];
				}else if(this.resLists.length === 2) {
					CarouselClassList = [
						'swiper-slide-3',
						'swiper-slide-4',
					];
				}else if(this.resLists.length === 3) {
					CarouselClassList = [
						'swiper-slide-2',
						'swiper-slide-3',
						'swiper-slide-4',
					];
				}else if(this.resLists.length === 4) {
					CarouselClassList = [
						'swiper-slide-2',
						'swiper-slide-3',
						'swiper-slide-4',
						'swiper-slide-5',
					];
				}else if(this.resLists.length === 5) {
					CarouselClassList = [
						'swiper-slide-1',
						'swiper-slide-2',
						'swiper-slide-3',
						'swiper-slide-4',
						'swiper-slide-5',
					];
				}else{
					CarouselClassList = [
						'swiper-slide-1',
						'swiper-slide-2',
						'swiper-slide-3',
						'swiper-slide-4',
						'swiper-slide-5',
					];
					
					let resListLength = this.resLists.length - 5;
					let middleValue = parseInt((this.resLists.length - 5) / 2);
					
					for (let i = 0; i < middleValue; i++) {
						CarouselClassList.push('swiper-slide-right');
						CarouselClassList.unshift('swiper-slide-left');
					}
					if(resListLength % 2) {
						CarouselClassList.push('swiper-slide-right');
					}
				}
				
				const swiperList = setFixArrayFun(this.resLists, CarouselClassList.length);
				
				this.swiperSlideList = (swiperList || []).map((item, index) => ({
					...item,
					class: CarouselClassList[index],
				}));
			},

			async getAnimateSwiperFun() {
				if (this.swiperSlideList.length <= 0) {
					this.getSwiperSlideFun();
				}
				
				await setAsyncFunWait(500);
				
				const classNameEnd = this.swiperSlideList[this.swiperSlideList.length - 1].class;
				
				for (let i = this.swiperSlideList.length - 1; i > 0; i--) {
					const element = this.swiperSlideList[i];
					element.class = this.swiperSlideList[i - 1].class;
				}
				
				this.swiperSlideList[0].class = classNameEnd;
			}
		}
	};
</script>

<style scoped lang="scss">
	.swiper-packbox {
		width: 100%;
		height: 400rpx;
		overflow: hidden;
		padding: 60rpx 0 20rpx;
		
		.swiper-packbox-content {
			width: 100%;
			
			.swiper-content {
				width: 100%;
				
				.swiper-item {
					margin: 0 50%;
					display: inline-block;
					transition: 0.6s;
					transform: translate(-50%, 0);
					transform-style: preserve-3d;
					margin-top: -40rpx;
					width: 213rpx;
					height: 301rpx;
					
					.swiper-img {
						width: 213rpx;
						height: 301rpx;
					}
					
					.swiper-txt {
						width: 95%;
						margin: auto;
						padding: 50rpx 4rpx 0;
						font-size: 32rpx;
						color: #111111;
						text-align: center;
						z-index: 1;
					}
				
					.swiper-cover {
						width: 213rpx;
						height: 301rpx;
					}
					
					.swiper-lever {
						display: none;
						left: 16rpx;
						top: 14rpx;
						height: 34rpx;
					}
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				.swiper-slide-left {
					opacity: 0;
					display: none;
					transform: matrix3d(-0.25,
							0,
							0.71,
							-0.001,
							0,
							0.85,
							0,
							0,
							-0.7,
							0,
							0.5,
							0,
							-200,
							0,
							0,
							1);
				}
				
				.swiper-slide-1 {
					transform: matrix3d(-0.25,
							0,
							0.71,
							-0.001,
							0,
							0.85,
							0,
							0,
							-0.7,
							0,
							0.5,
							0,
							-185,
							0,
							0,
							1);
				}
				
				.swiper-slide-2 {
					transform: matrix3d(-0.6,
							0,
							0.71,
							-0.001,
							0,
							0.85,
							0,
							0,
							-0.7,
							0,
							0.5,
							0,
							-130,
							0,
							0,
							1);
				}
				
				.swiper-slide-3 {
					z-index: 2;
					.swiper-lever {
						display: block;
					}
				}
				
				.swiper-slide-4 {
					z-index: 1;
					transform: matrix3d(0.6,
							0,
							0.71,
							-0.001,
							0,
							0.85,
							0,
							0,
							-0.7,
							0,
							0.5,
							0,
							25,
							0,
							0,
							1);
				}
				
				.swiper-slide-5 {
					transform: matrix3d(0.355,
							0,
							0.71,
							-0.001,
							0,
							0.75,
							0,
							0,
							-0.71,
							0,
							0.5,
							0,
							80,
							0,
							0,
							1);
				}
				
				.swiper-slide-right {
					opacity: 0;
					display: none;
					transform: matrix3d(0.355,
							0,
							0.71,
							-0.001,
							0,
							0.5,
							0,
							0,
							-0.71,
							0,
							0.71,
							0,
							190,
							0,
							0,
							1);
				}
			}
			
		}
		
	}
</style>
